<template>
  <div>
    <div class="warningPage">
      <CaseTitle :position="$route.path" :title="$route.meta.title" :subtitle="$route.meta.subtitle" />
      <div class="warningPage">
        <div class="warningSide">
          <div class="waringTip">
            <div class="tipContent">
              <div v-for="item in subtitles" :key="item.subtitle" class="tipList">
                <div
                  :key="item.path"
                  :class="['tipText text-clamp', $route.path.indexOf(item.path) >= 0 ? 'tab-item-box_active' : 'tab-item-box_common']"
                  @click="toPath(item)"
                >{{ item.subtitle }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="warningLeft">
          <div>
            <div class="warningLeftTitle">
              <span />
              <p>{{ $route.meta.subtitle }}</p>
            </div>
            <div class="warningInner">
              <!-- 文章内容展示 -->
              <div class="caseBox ql-editor content-detail" />
            </div>
            <!--   按钮         -->
            <div v-if="$route.query.type" class="subBtn">
              <el-button
                v-if="content.status === 0"
                type="primary"
                @click="editBack"
              >编辑</el-button>
              <el-button
                v-if="content.status === 0"
                v-permission="'contentAudit:edit'"
                type="danger"
                @click="preToSubmit"
              >提交</el-button>
              <el-button type="primary" @click="listBack">返回列表</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CaseTitle from '@/components/common/CaseTitle';
import { GetContentNoticeList, GetContentTypeList, GetContentNoticeBYyId } from '@/api/contentnotice'
import { PublishContentNotice } from '@/api/submit';

export default {
  name: 'CaseDetail',
  components: {
    CaseTitle
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    subtitles: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      typeList: [],
      dataType: '',
      basicUrl: '',
      caseData: [],
      content: {}
    };
  },
  computed: {},
  watch: {
    $route(to, from) {
      location.reload();
    }
  },
  created() {
    this.basicUrl = window.location.origin + '/api/';
    this.getType();
    // this.getData();
  },
  mounted() {},
  methods: {
    toPath(item) {
      this.$router.push(item.path)
    },
    getType() {
      const formData = new FormData()
      // 第一个值是key,第二个是value
      formData.append('current', 1)
      formData.append('size', 999)
      const params = new URLSearchParams(formData)
      GetContentTypeList(params).then((res) => {
        this.typeList = res.data.records;
        this.typeList.forEach((item) => {
          if (item.typeName === this.$route.meta.subtitle) {
            this.dataType = item.id;
            this.getData();
          }
        });
      });
    },
    // 获取内容列表
    async getData() {
      console.log('this.$route.query.type', this.$route.query.type)
      if (this.$route.query.type && this.$route.query.id) {
        // this.content.status = 0
        await this.getInfo(this.$route.query.id);
      } else {
        const obj = {
          current: 1,
          size: 999,
          noticeTitle: '',
          typeId: this.dataType,
          status: 4
        };
        try {
          const result = await GetContentNoticeList(obj);
          this.caseData = result.data.records;
          if (this.caseData && this.caseData.length !== 0) {
            await this.getInfo(this.caseData[0].id)
          } else {
            console.log('无数据')
          }
        } catch (e) {
          console.log(e);
        }
      }
    },
    // 获取内容详情
    async getInfo(id) {
      const obj = {
        id
      };
      try {
        const result = await GetContentNoticeBYyId(obj);
        this.content = result.data
        document.getElementsByClassName('caseBox')[0].innerHTML = this.content.noticeText;
        // document.getElementsByClassName('caseBox')[0].innerHTML = result.data.noticeText;
      } catch (e) {
        console.log(e);
      }
    },
    // 返回继续编辑
    editBack() {
      console.log(this.content);
      this.$store.commit('content/setContentInfo', this.content);
      this.$router.push({ path: '/contentRelease' });
      // this.$router.back()
    },
    // 返回列表页面
    listBack() {
      console.log(this.content);
      this.$store.commit('content/setContentInfo', null);
      // this.$router.push({ path: '/contentRelease' })
      this.$router.push({ path: '/contentAudit' });
    },
    // 提交
    async preToSubmit() {
      const obj = {
        id: this.$route.query.id
      };
      const result = await PublishContentNotice(obj);
      console.log('res', result);
      if (result.code === 200) {
        this.$router.go(0);
        this.$message({
          message: '提交成功！',
          type: 'success'
        });
      }
    }
  }
};
</script>

<!--<style lang="scss" scoped>-->
<style lang="less" scoped>
@aaa: 192;
.warningPage {
  font-family: 思源黑体 CN Medium;
  margin: (-8rem / @aaa) auto 0 auto;
  width: (1660rem / @aaa);
  //min-height: (560rem / @aaa);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  .warningLeft {
    width: (1210rem / @aaa);
    //width: (970rem / @aaa);
    //width: (900rem / @aaa);
    height: 100%;
    // margin-top: 35px;
    .warningInner {
      box-sizing: content-box;
      //padding: 0 0 (15rem / @aaa) (30rem / @aaa);
      width: 100%;
      height: 100%;
      .caseBox {
        margin-top: (10rem / @aaa);
        width: 100%;
        padding: (14rem / @aaa) 0;
        img {
          max-width: 100%;
        }
      }
    }
    .warningLeftTitle {
      width: (1210rem / @aaa);
      //width: (970rem / @aaa);
      //width: (900rem / @aaa);
      margin-bottom: (6rem / @aaa);
      padding: 0 0 (15rem / @aaa) (30rem / @aaa);
      border-bottom: (1rem / @aaa) solid #cbcbcb;
      height: (60rem / @aaa);
      //height: (50rem / @aaa);
      position: relative;
      p {
        position: absolute;
        top: 0;
        padding-left:(15rem /@aaa);
        //left: (15rem /@aaa);
        display: inline-block;
        font-size: (35rem / @aaa);
        //font-size: (28rem / @aaa);
        font-weight: 700;
      }
      span {
        position: absolute;
        top: 0;
        //margin-right: (10rem / @aaa);
        display: inline-block;
        width: (5rem / @aaa);
        height: (35rem / @aaa);
        background-color: #4497f7;
      }
    }
    .subBtn {
      width: 100%;
      height: auto;
      text-align: center;
      margin-top: (15rem / @aaa);
      .el-button {
        width: (220rem / @aaa);
        //width: (150rem / @aaa);
        height: (45rem / @aaa);
        font-size: (18rem / @aaa);
      }
    }
  }

  .waringTip {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    // margin-top: 35px;

    .tipContent {
      .tipList {
        width: 400rem/@aaa;
        //width: (320rem / @aaa);
        //width: (250rem / @aaa);
        height: (120rem / @aaa);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .tipText {
          width: 400rem/@aaa;
          //width: (320rem / @aaa);
          //width: (250rem / @aaa);
          font-size: (40rem / @aaa);
          //font-size: (36rem / @aaa);
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          -webkit-line-clamp: 1;
          line-height: (120rem / @aaa);
          text-align: center;
          color: #fff;
          font-weight: 700;
          background-color: #024da0;
        }
        .tab-item-box_common{
          background-color: #024da0;
        }
        .tab-item-box_active{
          background-color: #1880E2;
        }
      }
    }
  }
}
</style>
